<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" title="鼠标滑过哈哈哈">123</div>
    <script>
        // 注意: js想去操作元素 ->  修改样式  ->  获取/修改内容  -> 获取/修改属性 等
            //  先得获取元素
                // id 获取   document.getElementById()   返回元素对象本身
                // 标签获取  document.getElementsByTagName()  返回伪数组对象  下标访问[下标]

            // 2 el.innerHTML          获取元素的内容  
            //   el.innerHTML = "值"   设置元素的内容   

            // 3 el.style.属性 = "值"   给元素设置样式   遇复合属性需要写成驼峰是  
                // eg: font-size   --->   fontSize

            // 4  注意: 以下仅限于 获取 和 设置 标签属性   class是className
                // el.属性   获取元素的属性值
                // el.属性 = "值"  设置元素的属性值


        // 2、声明一个title变量，并赋值为“<h1>I love jsvascript</h1>”,
            var title = "<h1>I love jsvascript</h1>"
        // 再声明一个name变量，然后赋值为“<p>我是1712B班XXX</p>”;
            var name ;
            name = "<p>我是1712B班XXX</p>"
        // (出题重点：分清楚什么是声明，什么是赋值 , 注释)

        // (1)第一个变量直接赋值，第二个变量稍后赋值； 
        // (2)把这个变量打印在控制台
        console.log( title , name )
        // (3)要求每句话都要有注释
        // 3、声明一个oDiv变量，存储获取页面中id为box的div标签。
        var oDiv = document.getElementById("box")
        console.log(oDiv)
        // （1）把title和name变量的内容放到div标签中（体现标签样式）
        oDiv.innerHTML = title + name;
        // （2）设置h1标签字体大小为34px,字体颜色为“green”;
        var h1 = document.getElementsByTagName("h1")[0];
        // console.log(h1)
        h1.style.fontSize = "34px"
        h1.style.color = "green"
        // （3）设置p标签的字体大小为28px，背景颜色为”red”
        var p = document.getElementsByTagName("p")[0];
        // console.log(p.innerHTML)
        p.innerHTML = "八维大学生2408届前端工程师"
        p.style.fontSize = "28px"
        p.style.color = "red"
        // 4、给div标签添加一个“wrap”的class名，并将div的id名由“box”修改为“content”
            oDiv.className = "wrap"
            console.log( oDiv.id )
            oDiv.id = "content"
            
    </script>
</body>
</html>